<template>
	<view class="container">
		<image class="zhezhao" src="../../../static/zhezhao.png"></image>
		<!-- 		<view :style="{ marginTop: safeTop + 'px'}" style="background-color: aqua;">
			dsfsdfiuhiusadhfuihdusfhiuhdufshdfishiudshfuihu
		</view> -->

		<scroll-view scroll-y="true" class="scroll" @scroll="scroll">
			<!-- 轮播图 -->
			<swiper class="swiper" @change="change" circular :indicator-dots="false" :autoplay="true" :interval="5000"
				:duration="500">
				<swiper-item v-for="item in swipers">
					<image class="image"
						:src="item.url">
					</image>
				</swiper-item>
			
			</swiper>
			<!-- 头像和返回按钮 -->
			<view class="topback" :style="{ top: safeTop + 'px'}">
				<image class="back" @tap="back" :src="baseurl + '/toy/left.png'"></image>
				<image class="touxiang" :src="baseurl + '/toy/touxiang.png'"></image>
				<text class="name">女帝</text>
			</view>
			<!-- 图片数量 -->
			<view class="picNum">
				<text class="cur">{{curryPicNum}}/{{allPicNum}}</text>
			</view>
			<view class="second">
				<!-- 类型 -->
				<view class="type">
					<view class="button" :class="{select : curryType === 0}" @tap="selectType(0)">
						<text class="text">标准版</text>
					</view>
					<view class="button" :class="{select : curryType === 1}" @tap="selectType(1)">
						<text class="text">豪华版</text>
					</view>
					<view class="button" :class="{select : curryType === 2}" @tap="selectType(2)">
						<text class="text chao">超豪华版</text>
					</view>
				</view>
				<!-- 定金全款 -->
				<view class="jianbian">
					<view class="left">

						<view class="num">
							<view class="flag">¥</view>{{prePrice}}
						</view>
						<view class="ding">定金</view>
					</view>
					<view class="mid">¥{{allPrice}}全款</view>

				</view>
				<view style="clear: both;"></view>
				<!-- 介绍 -->
				<view class="desc">
					PG studio火影冲阵系列-02我爱罗PG studio火影冲阵系列-02我爱罗PG studio火影冲阵系列
				</view>
				<!-- 进度 -->
				<view class="schedule">
					<view class="curry-item">
						<view class="top">
							<view class="logo">
								<view class="inner"></view>
							</view>
							<view class="title">开启预售</view>
							<view class="icon"></view>
						</view>
						<view class="date">2024/02/28</view>
					</view>

					<view class="item">
						<view class="top">
							<view class="logo">
								<view class="inner"></view>
							</view>
							<view class="title">定金截止</view>
							<view class="icon"></view>
						</view>
						<view class="date">2024/02/28</view>
					</view>

					<view class="item">
						<view class="top">
							<view class="logo1">
								<view class="inner1"></view>
							</view>
							<view class="title">开始补款</view>
							<view class="icon"></view>
						</view>
						<view class="date">/</view>
					</view>
					<view class="item">
						<view class="top">
							<view class="logo">
								<view class="inner"></view>
							</view>
							<view class="title">出货时间</view>
						</view>
						<view class="date">/</view>
					</view>

				</view>
				<!-- 标签 -->
				<view class="tag">
					<view class="item">#海贼王</view>
					<view class="item">#女帝</view>
				</view>
			</view>

			<!-- 工作室简介 -->
			<view class="studio">
				<view class="studio-top">
					<image class="studio-image" :src="baseurl + '/toy/touxiang.png'"></image>
					<view class="studio-info">
						<view class="studio-name">BT studio</view>
						<view class="studio-desc">工作室简介工作室简介工作室...工作室简介工作室</view>
					</view>
				</view>
				<!-- <view class="line"></view> -->
				<view class="fa-bottom">
					<view class="fa-left">
						<view class="fa-fabu">发布者</view>
						<image class="fa-image" :src="baseurl + '/toy/touxiang.png'"></image>
						<view class="fa-name">小杨</view>
					</view>
					<view class="fa-right">
						2008/11/21
					</view>
				</view>
			</view>



			<!-- 产品参数 -->
			<view class="parameter">
				<view class="title">产品参数</view>
				<view class="list">
					<view class="item" v-for="item in parameter">
						<view class="name">{{item.key}}</view>
						<view class="info">{{item.value}}</view>
					</view>

				</view>
			</view>

			<!-- 产品展示 -->
			<view class="display">
				<view class="title">产品展示</view>
				<view class="display-image">
					<image class="image" :src="baseurl + '/toy/dispaly1.png'"></image>
					<image class="image" :src="baseurl + '/toy/dispaly2.png'"></image>
				</view>
			</view>

			<!-- 一起玩雕 -->
			<view class="play">
				<view class="play-title">一起玩雕</view>
				<view class="play-mid">
					<view class="play-item">
						<image class="play-image" :src="baseurl + '/toy/code.png'"></image>
						<view class="play-name">玩家交流群</view>
						<view class="play-desc">莫玩发烧友的聚集地</view>
					</view>
					<view class="play-item">
						<image class="play-image" :src="baseurl + '/toy/code.png'"></image>
						<view class="play-name">玩家交流群</view>
						<view class="play-desc">莫玩发烧友的聚集地</view>
					</view>
				</view>

			</view>

			<view class="bottom-button">
				<view class="play-button">
					加入我的玩具库
				</view>
			</view>

		</scroll-view>
		<!-- 想要按钮 -->
		<view class="like" @tap="wantTap">
			<image v-if="want" class="like-image" :src="baseurl + '/toy/ic_want.png'"></image>
			<image v-else class="like-image" :src="baseurl + '/toy/ic_want_gray.png'"></image>
			<view class="like-text">想要</view>
		</view>
	</view>

</template>

<script setup>
	import {baseUrl} from '@/setting/const.js';
	import {
		ref
	} from 'vue';
	const baseurl = ref(baseUrl)
	// 获取安全区域
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const safeTop = safeAreaInsets.top + 6

	const want = ref(false)
	const wantTap = ()=>{
		want.value = !want.value
	}
	// 当前选中的类型
	const curryType = ref(0)
	// 点击切换类型
	const selectType = (e) => {
		curryType.value = e
		console.log(curryType.value);
	}
	// 定金
	const prePrice = ref(888)
	const allPrice = ref(3000)

	const scroll = (e) => {
		// console.log(e);
	}

	// 轮播图图片
	const swipers = ref([
		{
			id:0,
			url : baseurl.value + '/home/home1.png'
		},
		{
			id:1,
			url : baseurl.value + '/home/home1.png'
		},
		{
			id:2,
			url : baseurl.value + '/home/home1.png'
		},
	])
	// 当前展示的图片
	const allPicNum = ref(swipers.value.length)
	const curryPicNum = ref(1)
	const change = (e) => {
		// console.log(e.detail.current);
		curryPicNum.value = e.detail.current + 1
	}
	// 返回按钮
	const back = () => {
		uni.navigateBack()
	}

	// 产品参数
	const parameter = ref([{
			key: 'IP',
			value: '海贼王',
		},
		{
			key: '类型',
			value: '雕像',
		},
		{
			key: '材质',
			value: 'pu、宝丽石',
		},
		{
			key: '发货时间',
			value: '2024年第一季度',
		},
		{
			key: '高度',
			value: '25cm',
		},
		{
			key: '深度',
			value: '40cm',
		},
		{
			key: '宽度',
			value: '30cm',
		},
	])
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: zihunbiantaoti;
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/zihunbiantaoti.ttf');
	}

	.like {
		width: 100rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 50rpx;
		position: fixed;
		top: 1249rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.like-image {
			width: 50rpx;
			height: 50rpx;
		}

		.like-text {

			width: 40rpx;
			height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #979A9E;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.container {
		background-color: #F4F5F8;
		.zhezhao{
			// background-color: rebeccapurple;
			position: absolute;
			top: 0;
			width: 750rpx;
			height: 280rpx;
			z-index: 1;
		}
		.second {
			background-color: #FFFFFF;
		}
	}

	.line {
		width: 690rpx;
		height: 0.1rpx;
		border: 0.1rpx solid #EEEEEE;
		margin: 0 auto;
	}

	.bottom-button {
		width: 750rpx;
		height: 138rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		// padding: 20rpx 30rpx 88rpx 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.play-button {
			width: 690rpx;
			height: 90rpx;
			background: #FFDD1A;
			border-radius: 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 45rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.play {
		margin-top: 15rpx;
		width: 750rpx;

		padding-top: 30rpx;
		padding-bottom: 50rpx;
		background-color: #FFFFFF;

		.play-title {
			// padding-top: 29rpx;

			width: 128rpx;
			height: 45rpx;
			padding: 0 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #0B0B0B;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 18rpx;
		}

		.play-mid {
			width: 750rpx;
			display: flex;

			view:first-child{
				margin-left: 70rpx;
			}
			:last-child{
				margin-left: 40rpx;
			}
			.play-item {
				
				width: 285rpx;
				height: 378rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.play-image {
					width: 252.35rpx;
					height: 253.67rpx;
				}

				.play-name {
					// background-color: green;
					width: 140rpx;
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #0B0B0B;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.play-desc {
					// background-color: red;
					width: 216rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #979A9E;
					line-height: 33rpx;
					// text-align: left;
					font-style: normal;
				}
			}
		}

	}

	.display {
		margin-top: 20rpx;
		width: 750rpx;

		padding-top: 30rpx;
		background-color: #FFFFFF;

		.title {
			// padding-top: 29rpx;

			width: 128rpx;
			height: 45rpx;
			padding: 0 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #0B0B0B;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 18rpx;
		}

		.display-image {
			display: flex;
			flex-direction: column;

			.image {
				// TODO 
				width: 749.79rpx;
				height: 1016.22rpx;
				margin-top: 0 !important;
			}
		}

	}

	.parameter {
		margin-top: 50rpx;
		width: 750rpx;
		padding: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;

		// background-color: #000000;
		.title {
			// padding-top: 29rpx;

			width: 128rpx;
			height: 45rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #0B0B0B;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 18rpx;
		}

		.list {
			background-color: #FFFFFF;

			.item {
				display: flex;
				margin-top: 2rpx;

				.name {
					width: 202rpx;
					height: 70rpx;
				
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F4F5F8;
				}

				.info {
					margin-left: 2rpx;
					
					width: 482rpx;
					height: 70rpx;
					background-color: #F4F5F8;
					
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 33rpx;
					// text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.studio {
		height: 246rpx;
		width: 750rpx;
		// padding: 0 30rpx;
		margin: 30rpx auto;
		background-color: #FFFFFF;
		// background-color: red;


		.studio-top {
			padding: 0 30rpx;
			height: 146rpx;
			width: 690rpx;
			// background-color: darkcyan;
			display: flex;
			// justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #EEEEEE;

			.studio-image {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50rpx;
			}


			.studio-info {
				display: flex;
				flex-direction: column;
				margin-left: 14rpx;

				.studio-name {
					// width: 129rpx;
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #0B0B0B;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					// background-color: red;
				}

				.studio-desc {
					margin-top: 15rpx;
					// width: 528rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.fa-bottom {
			width: 750rpx;
			height: 100rpx;
			// padding: 0 30rpx;
			// padding-right: 530rpx;
			background-color: #FFFFFF;
			height: 124rpx;
			// background-color: darkblue;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			align-items: center;
			// position: relative;

			.fa-left {
				// background-color: salmon;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.fa-fabu {
					width: 72rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #979A9E;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}

				.fa-image {
					margin-left: 12rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
				}

				.fa-name {
					margin-left: 12rpx;
					// width: 48rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}

			}

			.fa-right {
				// width: 115rpx;
				height: 30rpx;
				margin-right: 30rpx;
				// background-color: red;
				
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #000000;
				line-height: 30rpx;
				// text-align: right;
				font-style: normal;
			}
		}
	}


	.tag {
		// background-color: rebeccapurple;
		width: 690rpx;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		:not(:first-child) {
			// background-color: darkcyan !important;
			margin-left: 20rpx;
		}

		.item {
			height: 50rpx;
			background: #F4F5F8;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 9rpx 20rpx 8rpx 20rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #0B0B0B;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.schedule {
		width: 690rpx;
		height: 106rpx;
		background-color: #F4F5F8;
		margin: 0 auto;
		margin-top: 30rpx;
		padding-left: 14rpx;
		padding-top: 14rpx;
		display: flex;
		border-radius: 10rpx;

		.curry-item {
			// background-color: rebeccapurple;
			color: #0B0B0B;
			width: 172.5rpx;
			height: 100%;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				// background-color: cornflowerblue;
				align-items: center;

				.logo {
					width: 18rpx;
					height: 18rpx;
					background-color: rgba(255, 221, 26, 0.2);
					opacity: 0.2;
					border-radius: 9rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.inner {
						width: 10rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background-color: rgba(255, 221, 26, 1);
					}
				}

				.title {
					// background-color: darkblue;
					margin-left: 7rpx;
					width: 96rpx;
					// width: 136rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;

					line-height: 33rpx;
					text-align: left;
					font-style: normal;

				}

				.icon {
					// display: inline-block;
					width: 20rpx;
					height: 3rpx;
					margin-left: 20rpx;
					background-color: #D4D8DE;
				}
			}

			.date {
				margin-left: 25rpx;
				margin-top: 15rpx;
				width: 105rpx;
				height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.item {
			// background-color: rebeccapurple;
			color: #979A9E;
			// width: 172.5rpx;
			height: 100%;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				// background-color: cornflowerblue;
				align-items: center;

				.logo {
					width: 18rpx;
					height: 18rpx;
					background-color: rgba(151, 154, 158, 0.2);
					// opacity: 0.2;
					border-radius: 9rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.inner {
						width: 10rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background:rgba(151, 154, 158, 1);
						opacity: 1 !important;
					}
				}
				

				.title {
					// background-color: darkblue;
					margin-left: 7rpx;
					width: 96rpx;
					// width: 136rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;

					line-height: 33rpx;
					text-align: left;
					font-style: normal;

				}

				.icon {
					// display: inline-block;
					width: 20rpx;
					height: 3rpx;
					margin-left: 20rpx;
					background-color: #D4D8DE;
				}
			}

			.date {
				margin-left: 25rpx;
				margin-top: 15rpx;
				width: 105rpx;
				height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

	}

	.desc {
		margin-top: 20rpx;
		padding: 0 30rpx 0;
		// background-color: rebeccapurple;
		width: 690rpx;
		height: 84rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #0B0B0B;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;

		.image {
			width: 750rpx;
			height: 750rpx;
		}

		::v-deep .uni-swiper-dots-horizontal {
			right: 20rpx;
			// bottom: 40rpx;
		}

	}

	.topback {
		// background-color: rebeccapurple;
		// width: 180rpx;
		display: flex;
		// justify-content: center;
		position: absolute;
		align-items: center;

		.back {
			width: 60rpx;
			height: 60rpx;
			padding-left: 10rpx;
			// background-color: green;
		}

		.touxiang {
			width: 50rpx;
			height: 50rpx;
			border-radius: 25rpx;
			margin-left: 10rpx;
		}

		.name {
			width: 102rpx;
			height: 50rpx;
			// margin-left: 10rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
		}

	}

	.picNum {
		// width: 93rpx;
		height: 42rpx;
		background: #000000;
		border-radius: 28rpx;
		opacity: 0.48;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		position: absolute;
		right: 52rpx;
		top: 693rpx;
		display: flex;
		// flex-direction: row-reverse;
		justify-content: center;
		align-items: center;
		// background-color: #FFDD1A;

		.cur {
			width: 47rpx;
			height: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
		}


	}

	.type {
		width: 750rpx;
		height: 60rpx;
		padding-top: 20rpx;
		// margin-bottom: 20rpx;
		// background-color: rebeccapurple;
		display: flex;

		.button {
			width: 124rpx;
			height: 60rpx;

			border-radius: 30rpx;
			margin-left: 30rpx;
			background-color: #F4F5F8;
			color: #0B0B0B;
			// box-sizing: content-box;
			// padding: 14rpx 26rpx 13rpx 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.text {
				width: 72rpx;
				height: 33rpx;
				// padding: 14rpx 26rpx 13rpx 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;

				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}

			.chao {
				width: 96rpx;
			}

		}
	}

	.select {
		// height: 300rpx !important;
		color: #FFFFFF !important;
		background-color: #000000 !important;
	}

	.jianbian {
		// background-color: antiquewhite;
		padding-left: 35rpx;
		padding-right: 30rpx;
		width: 750rpx;
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
		// height: 50rpx;

		.left {
			// background-color: red;
			// width: 820rpx;
			height: 50rpx;
			// display: flex;
			// justify-content: space-between;
			// align-items: flex-end;
			// margin-bottom: 20rpx;
			display: flex;
			align-items: flex-end;
			float: left;


			.num {
				// width: 400rpx;
				// background-color: green;
				float: left;

				// width: 88rpx;
				height: 50rpx;
				font-family: zihunbiantaoti;
				font-size: 42rpx;
				color: #0B0B0B;
				line-height: 38rpx;
				text-align: center;
				display: flex;
				align-items: flex-end;

				font-style: normal;

				.flag {
					font-size: 32rpx !important;
					display: inline;
				}
			}

			.ding {
				// background-color: firebrick;
				float: left;
				width: 48rpx;
				height: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0B0B0B;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				margin-left: 9rpx;

			}
		}

		.mid {
			// background-color: green;
			float: left;
			margin-left: 30rpx;

			width: 120rpx;
			height: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #979A9E;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>